<template>
  <div>
    <!-- 订单查询按钮 -->
    <div>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="所有订单" name="所有订单" />
        <el-tab-pane label="待支付" name="待支付" />
        <el-tab-pane label="待派单" name="待派单" />
        <el-tab-pane label="待接单" name="待接单" />
        <el-tab-pane label="待服务" name="待服务" />
        <el-tab-pane label="待确认" name="待确认" />
        <el-tab-pane label="已完成" name="已完成" />

      </el-tabs>

    </div>
    <!-- 订单管理 -->
    <div>
      <el-table
        ref="multipleTable"
        :data="orders"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="index" label="序号" width="120" />
        <el-table-column type="selection" width="55" />
        <el-table-column prop="customer.realname" label="学生姓名" width="120">
          <!-- {{ orders.customer.realname }} -->
          <!-- <template slot-scope="scope">{{ scope.row.date }}</template> -->
        </el-table-column>
        <el-table-column label="学生信息" width="120">
          <template v-slot="scope">
            <div>
              <el-button type="text" @click="lookInfo(scope.row.customer)">查看信息</el-button>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="orderLines[0].product.name" label="下单科目" />
        <el-table-column prop="orderTime" label="下单时间" />
        <el-table-column prop="total" label="订单价格" />
        <el-table-column prop="address.address" label="学生地址" />
        <el-table-column v-if="activeName != '待支付' && activeName != '待派单'" label="老师信息">
          <template v-slot="scope">
            <div>
              {{ scope.row.employee.realname || "-" }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="课程状态" />
      </el-table>
      <!-- <div style="margin-top: 20px">
        <el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>
        <el-button @click="toggleSelection()">取消选择</el-button>
      </div> -->
    </div>
    <!-- 删除按钮 -->
    <div>
      <el-button
        v-show="btn"
        type="primary"
        style="position: fixed; right: 150px;bottom: 100px;"
        @click="deleteOrder"
      >删除订单</el-button>
    </div>
  </div>
</template>
<script>
import { get } from '@/utils/request.js'
export default {
  data() {
    return {
      activeName: 'first',
      params: {
        page: 1,
        pageSize: 10
      },
      orders: [],
      btn: false,
      arr: []
    }
  },
  created() {
    this.getOrder()
  },
  methods: {
    lookInfo(info) {
      this.$alert(`
      姓名：${info.realname}
      电话:${info.telephone}
      性别:${info.gender}
      邮箱:${info.email}
      `,
      `${info.realname}`,
      {
        confirmButtonText: '确定'
      }
      )
    },
    // 删除语句
    async delete(id) {
      const res = await get('/order/deleteById', { id })
      console.log(res)
    },
    // 管理删除的语句
    deleteOrder() {
      const res = this.arr.map(item => {
        return item.id
      })
      for (let i = 0; i < res.length; i++) {
        this.delete(res[i])
      }
      setTimeout(() => {
        this.getOrder()
      }, 1000)
    },
    // 控制分类
    handleClick() {
      console.log(this.activeName)
      if (this.activeName != '所有订单') {
        this.params.status = this.activeName
        this.getOrder()
      } else {
        delete this.params.status
        this.getOrder()
      }
    },
    onSubmit() {
      console.log('submit!')
    },
    // 查询订单
    async getOrder() {
      const res = await get('/order/pageQuery', this.params)
      console.log(res)
      this.orders = res.data.list
      console.log(this.orders)
      /* 不更改为异步请求，就会得到一个promise对象 */
    },
    // 更改删除按钮形态
    handleSelectionChange(tag) {
      console.log(tag)
      this.arr = tag
      if (tag.length > 0) {
        this.btn = true
      } else {
        this.btn = false
      }
    }
  }
}
</script>
